import React, { useState } from "react";
import s from './style.module.less'
import { List, Input, Button, Checkbox, Toast } from 'zarm'
import CustomIcon from "../../components/CustomIcon"
import {post} from '@/utils'
import cx from 'classnames'

const Login = () => {
    const [type, setType] = useState('login') 
    const [username, setUsername] = useState('')
    const [password, setPassword] = useState('')
    const [verify, setVerify] = useState('')

    const onSubmit = async () => {
        if(!username) {
            Toast.show('请输入账号')
            return
        }
        if(!password) {
            Toast.show('请输入密码')
            return
        }
        console.log(username,password)

        try {
            // 判断是否是登录状态
            if (type == 'login') {
                const { data } = await post('/api/user/login',{
                    username,
                    password
                });
                // 将token写入localStorage
                localStorage.setItem('token',data.token)
                Toast.show('登录成功')
                window.location.href = '/';
            } else {
            // 注册
                const { data } = await post('/api/user/register',{
                    username,
                    password
                })
                Toast.show('注册成功')
            // 切换至登录
                setType('login')
            }
        } catch(err) {
            Toast.show('系统错误')
            console.log(err)
        }
    }

    return(
        <div className={s.auth}>
            <div className={s.head}/>
            <div className={s.tab}>
                <span className={cx({[s.active]: type == 'login'})} onClick={() => setType('login')}>登录</span>
                <span className={cx({[s.active]: type == 'register'})} onClick={() => setType('register')}>注册</span>
            </div>
            <div className={s.form}>
                <List bordered={false}>
                    <List.Item
                         prefix={<CustomIcon type="zhanghao" />}
                    >
                        <Input
                            clearable
                            type="text"
                            placeholder="请输入账号"
                            onChange={(e) => setUsername(e.target.value)}
                        />
                    </List.Item>
                    <List.Item
                         prefix={<CustomIcon type="mima"/>}
                    >
                        <Input
                            clearable
                            type="password"
                            placeholder="请输入密码"
                            onChange={(e) => setPassword(e.target.value)}
                        />
                    </List.Item>
                   {
                    type == 'register' ?  <List.Item
                    prefix={<CustomIcon type="mima"/>}
                    >
                        <Input
                            clearable
                            type="text"
                            placeholder="请输入验证码"
                            onChange={(val) => setVerify(val)}
                        />
                        </List.Item> : null
                   }
                </List>
                <div className={s.operation}>
                   {
                    type == 'register' ?  <div className={s.agree}>
                            <Checkbox/>
                            <label className="text-aglin">阅读并同意<a>《手札条款》</a></label>
                         </div> : null
                   }
                    <Button block theme="primary" onClick={onSubmit}>{type == 'login' ? '登录' : '注册'}</Button>
                </div>
            </div>
        </div>
    )
}

export default Login